<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import vScrollBottom from '../directives/scrollBottom'

const route = useRoute()
const router = useRouter()

// 获取客服ID和其他参数
const customerId = ref(route.query.customerId || 'cs001')
const modelType = ref(route.query.modelType || 'normal')
const responseType = ref(route.query.responseType || 'stream')

// 如果没有客服ID，返回登录页
if (!customerId.value) {
  router.push('/')
}

// WebSocket相关
const ws = ref(null)
const connected = ref(false)
const reconnectAttempts = ref(0)
const maxReconnectAttempts = 5

// 标签页管理
const activeTab = ref('chat1')
const tabs = reactive([
  { name: 'chat1', label: '会话1', connected: false, messages: [], sessionId: '', loading: false, inputContent: '' },
  { name: 'chat2', label: '会话2', connected: false, messages: [], sessionId: '', loading: false, inputContent: '' },
  { name: 'chat3', label: '会话3', connected: false, messages: [], sessionId: '', loading: false, inputContent: '' },
  { name: 'chat4', label: '会话4', connected: false, messages: [], sessionId: '', loading: false, inputContent: '' }
])

// 当前活动标签页
const activeTabData = computed(() => {
  return tabs.find(tab => tab.name === activeTab.value)
})

// 连接WebSocket
const connectWebSocket = () => {
  try {
    console.log('尝试连接WebSocket...')
    ws.value = new WebSocket('ws://localhost:8080/wsraw')
    
    ws.value.onopen = () => {
      console.log('WebSocket连接成功')
      connected.value = true
      reconnectAttempts.value = 0
      ElMessage.success('WebSocket连接成功')
      // 为每个标签页创建会话
      tabs.forEach((tab, index) => {
        setTimeout(() => {
          createSession(tab.name)
        }, index * 500) // 错开创建会话，避免响应混乱
      })
    }
    
    ws.value.onclose = (event) => {
      console.log('WebSocket连接关闭:', event)
      connected.value = false
      ElMessage.warning('WebSocket连接已关闭')
      
      // 尝试重新连接
      if (reconnectAttempts.value < maxReconnectAttempts) {
        reconnectAttempts.value++
        const timeout = 2000 * Math.pow(2, reconnectAttempts.value - 1)
        console.log(`${timeout / 1000}秒后尝试第${reconnectAttempts.value}次重连...`)
        setTimeout(connectWebSocket, timeout)
      } else {
        ElMessage.error('WebSocket连接失败，请刷新页面重试')
      }
    }
    
    ws.value.onerror = (error) => {
      console.error('WebSocket错误:', error)
      ElMessage.error('WebSocket连接错误')
    }
    
    ws.value.onmessage = (event) => {
      console.log('收到WebSocket消息:', event.data)
      handleMessage(event.data)
    }
  } catch (error) {
    console.error('WebSocket连接失败:', error)
    ElMessage.error('WebSocket连接失败')
  }
}

// 处理收到的消息
const handleMessage = (data) => {
  try {
    const message = JSON.parse(data)
    console.log('收到消息:', message)
    
    // 会话创建成功
    if (message.type === 'SESSION_CREATED') {
      // 找到正在等待会话创建的标签页
      const tabIndex = tabs.findIndex(tab => tab.loading && !tab.sessionId)
      if (tabIndex !== -1) {
        tabs[tabIndex].sessionId = message.sessionId
        tabs[tabIndex].connected = true
        
        // 添加系统消息和首条用户消息
        tabs[tabIndex].messages.push({
          id: Date.now(),
          type: 'system',
          content: '会话已创建，已连接到AI模型'
        })
        
        tabs[tabIndex].messages.push({
          id: Date.now() + 1,
          type: 'user',
          content: message.firstMessage
        })
        
        tabs[tabIndex].loading = false
      }
    } 
    // 处理分块响应消息（SSE格式）
    else if (message.type === 'RESPONSE_CHUNK') {
      // 查找对应的标签页
      const tabWithSession = tabs.find(tab => tab.sessionId === message.sessionId)
      if (tabWithSession) {
        const lastMessage = tabWithSession.messages[tabWithSession.messages.length - 1]
        
        // 如果最后一条消息是AI的消息，则追加内容
        if (lastMessage && lastMessage.type === 'ai') {
          lastMessage.content += message.content || ''
        } else {
          // 否则创建新的AI消息
          tabWithSession.messages.push({
            id: Date.now(),
            type: 'ai',
            content: message.content || ''
          })
        }
        
        // 如果内容为空或包含特殊标记，可能表示响应结束
        if (!message.content || message.content.includes('[END]')) {
          tabWithSession.loading = false
        }
      }
    }
    // 接收到聊天消息
    else if (message.type === 'MESSAGE' || message.type === 'STREAM_MESSAGE') {
      // 查找对应的标签页
      const tabWithSession = tabs.find(tab => tab.sessionId === message.sessionId)
      if (tabWithSession) {
        // 对于流式消息，需要追加内容
        if (message.type === 'STREAM_MESSAGE') {
          const lastMessage = tabWithSession.messages[tabWithSession.messages.length - 1]
          // 如果最后一条是AI的消息，则追加内容
          if (lastMessage && lastMessage.type === 'ai') {
            lastMessage.content += message.content || ''
          } else {
            // 否则添加新消息
            tabWithSession.messages.push({
              id: Date.now(),
              type: 'ai',
              content: message.content || ''
            })
          }
        } else {
          // 非流式消息直接添加
          tabWithSession.messages.push({
            id: Date.now(),
            type: 'ai',
            content: message.content || ''
          })
        }
        tabWithSession.loading = false
      }
    }
    // 处理错误消息
    else if (message.type === 'ERROR') {
      ElMessage.error(message.message || '发生错误')
      const tabIndex = tabs.findIndex(tab => tab.loading)
      if (tabIndex !== -1) {
        tabs[tabIndex].loading = false
      }
    }
    // 处理其他类型的消息
    else {
      console.log('未处理的消息类型:', message.type)
      // 尝试处理可能的消息格式
      if (message.content) {
        // 如果消息包含content字段，将其作为AI的回复
        const activeTab = tabs.find(tab => tab.loading)
        if (activeTab) {
          activeTab.messages.push({
            id: Date.now(),
            type: 'ai',
            content: message.content
          })
          activeTab.loading = false
        }
      }
    }
  } catch (error) {
    console.error('处理消息错误:', error)
  }
}

// 创建会话
const createSession = (tabName) => {
  if (!connected.value) {
    console.log('WebSocket未连接，无法创建会话')
    ElMessage.error('WebSocket未连接')
    return
  }
  
  const tabIndex = tabs.findIndex(tab => tab.name === tabName)
  if (tabIndex !== -1) {
    tabs[tabIndex].loading = true
    
    const createSessionMsg = {
      action: 'createSession',
      customerId: customerId.value,
      modelServiceName: 'doubaoService'
    }
    
    console.log('发送创建会话请求:', createSessionMsg)
    ws.value.send(JSON.stringify(createSessionMsg))
  }
}

// 发送消息
const sendMessage = () => {
  if (!activeTabData.value.inputContent.trim()) {
    ElMessage.warning('请输入消息内容')
    return
  }
  
  if (!activeTabData.value.connected) {
    ElMessage.error('未连接到AI模型')
    return
  }
  
  if (!activeTabData.value.sessionId) {
    ElMessage.error('会话未创建')
    return
  }
  
  const content = activeTabData.value.inputContent
  
  // 添加用户消息到聊天记录
  activeTabData.value.messages.push({
    id: Date.now(),
    type: 'customer',
    content
  })
  
  // 发送消息到服务器
  const sendMessageObj = {
    action: 'sendMessage',
    sessionId: activeTabData.value.sessionId,
    customerId: customerId.value,
    content,
    modelType: modelType.value,
    responseType: responseType.value
  }
  
  console.log('发送消息:', sendMessageObj)
  activeTabData.value.loading = true
  
  // 添加一个空的AI消息占位，等待服务器响应
  activeTabData.value.messages.push({
    id: Date.now() + 1,
    type: 'ai',
    content: ''
  })
  
  try {
    ws.value.send(JSON.stringify(sendMessageObj))
    activeTabData.value.inputContent = ''
  } catch (error) {
    console.error('发送消息失败:', error)
    ElMessage.error('发送消息失败，请重试')
    activeTabData.value.loading = false
    // 移除AI消息占位
    activeTabData.value.messages.pop()
  }
}

// 处理按键事件
const handleKeyDown = (event) => {
  // 仅在按下Enter且没有按Shift键时发送消息
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault() // 阻止默认的换行行为
    sendMessage()
  }
}

// 返回登录页
const backToLogin = () => {
  // 关闭WebSocket连接
  if (ws.value && ws.value.readyState === WebSocket.OPEN) {
    ws.value.close()
  }
  router.push('/')
}

// 监听消息变化，自动滚动到底部
const messagesContainer = ref(null)
const scrollToBottom = () => {
  if (messagesContainer.value) {
    setTimeout(() => {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }, 10)
  }
}

// 监听所有标签页的消息变化
watch(() => tabs.map(tab => tab.messages.length), () => {
  scrollToBottom()
}, { deep: true })

// 在组件挂载时连接WebSocket
onMounted(() => {
  connectWebSocket()
})
</script>

<template>
  <div class="chat-container">
    <div class="sidebar">
      <div class="logo">
        <img src="../assets/chat-bubble.svg" alt="Logo" class="logo-icon" />
        <span>试用</span>
      </div>
      <div class="status-badge">
        <span class="online-dot"></span>
        <span>在线</span>
      </div>
      
      <div class="stats">
        <div class="stat-item">
          <div class="stat-num">1</div>
          <div class="stat-label">今日接待</div>
        </div>
        <div class="stat-item">
          <div class="stat-num">1</div>
          <div class="stat-label">未下单</div>
        </div>
        <div class="stat-item">
          <div class="stat-num">0</div>
          <div class="stat-label">未付款</div>
        </div>
        <div class="stat-item">
          <div class="stat-num">0</div>
          <div class="stat-label">已付款</div>
        </div>
      </div>
      
      <div class="nav-tabs">
        <div class="search-box">
          <input type="text" placeholder="联系人，群，聊天记录" />
          <i class="search-icon">🔍</i>
        </div>
        
        <div class="tab-list">
          <div class="tab-item active">
            <span class="tab-icon">💬</span>
            <div class="badge">2</div>
          </div>
          <div class="tab-item">
            <span class="tab-icon">⏱️</span>
          </div>
          <div class="tab-item">
            <span class="tab-icon">👤</span>
          </div>
          <div class="tab-item">
            <span class="tab-icon">👥</span>
          </div>
          <div class="tab-item">
            <span class="tab-icon">👪</span>
          </div>
        </div>
      </div>
      
      <div class="chat-list">
        <div class="chat-list-header">
          <span>接待:3</span>
          <span>
            联系时间
            <i class="sort-icon">▼</i>
          </span>
        </div>
        
        <div 
          v-for="(tab, index) in tabs" 
          :key="tab.name"
          :class="['chat-item', { active: activeTab === tab.name, 'pink-bg': index % 2 === 0, 'blue-bg': index % 2 === 1 }]"
          @click="activeTab = tab.name"
        >
          <div class="avatar">
            <img src="../assets/user-avatar.png" alt="User" />
          </div>
          <div class="chat-info">
            <div class="chat-name">j**** {{ tab.label }}</div>
            <div class="chat-preview">商品卡片</div>
          </div>
          <div class="chat-time">00:01</div>
        </div>
      </div>
    </div>
    
    <div class="main-content">
      <div class="header">
        <div class="session-info">
          <img src="../assets/user-avatar.png" alt="User" class="user-avatar" />
          <span class="user-name">j****</span>
          <span class="session-time">2025-06-08 01:56:19</span>
        </div>
        
        <div class="header-right">
          <div class="ai-training">
            <span class="ai-label">AI 智训</span>
            <span class="params-info">
              (模式: {{ modelType }}, 响应: {{ responseType }})
            </span>
          </div>
          <div class="header-icons">
            <span>📋</span>
            <span>📞</span>
            <span>👤</span>
            <span>📄</span>
            <span>⋮</span>
          </div>
        </div>
      </div>
      
      <div class="tabs-header">
        <div class="tab active">首页</div>
        <div class="tab">训练成绩</div>
      </div>
      
      <div class="chat-main">
        <div class="chat-area">
          <div class="messages" ref="messagesContainer" v-scroll-bottom>
            <div 
              v-for="msg in activeTabData.messages" 
              :key="msg.id" 
              :class="['message', msg.type]"
            >
              <template v-if="msg.type === 'user' || msg.type === 'customer'">
                <div class="message-content">
                  {{ msg.content }}
                </div>
                <div class="avatar">
                  <span class="user-label">用户</span>
                </div>
              </template>
              
              <template v-else-if="msg.type === 'ai'">
                <div class="avatar">
                  <span class="ai-label">AI</span>
                </div>
                <div :class="['message-content', { 'typing': activeTabData.loading && msg === activeTabData.messages[activeTabData.messages.length - 1] }]">
                  {{ msg.content }}
                </div>
              </template>
              
              <template v-else-if="msg.type === 'system'">
                <div class="system-message">
                  {{ msg.content }}
                </div>
              </template>
            </div>
            
            <div v-if="activeTabData.loading" class="loading-message">
              <span>AI正在思考中...</span>
            </div>
          </div>
          
          <div class="message-tools">
            <div class="tool-icons">
              <span class="tool-icon">😊</span>
              <span class="tool-icon">📎</span>
              <span class="tool-icon">🖼️</span>
              <span class="tool-icon">🎬</span>
              <span class="tool-icon">📁</span>
              <span class="tool-icon">✂️</span>
              <span class="tool-icon">🔀</span>
              <span class="tool-icon">📑</span>
              <span class="tool-icon history">⏱️</span>
              <span class="tool-icon history">⚙️</span>
            </div>
          </div>
          
          <div class="input-area">
            <textarea 
              v-model="activeTabData.inputContent"
              placeholder="请输入消息..." 
              :disabled="!activeTabData.connected"
              @keydown="handleKeyDown"
            ></textarea>
            
            <div class="send-actions">
              <button class="btn-cancel">关闭</button>
              <button 
                class="btn-send" 
                :disabled="!activeTabData.connected"
                @click="sendMessage"
              >
                发送！
              </button>
            </div>
          </div>
        </div>
        
        <div class="customer-info">
          <div class="info-header">
            <span>客户信息</span>
            <span class="expand-icon">▼</span>
          </div>
          
          <div class="customer-details">
            <div class="customer-name">
              j**** <span class="badge good">好评100%</span> <span class="badge trust">信用7</span> <span class="badge vip">普通</span>
            </div>
            
            <div class="info-row">
              <span class="info-label">店铺消费：</span>
              <span class="info-value">¥-</span>
            </div>
            
            <div class="info-row">
              <span class="info-label">平均客单价：</span>
              <span class="info-value">¥-</span>
            </div>
            
            <div class="info-row">
              <span class="info-label">优惠券：</span>
              <span class="info-value">( )</span>
            </div>
            
            <div class="info-row">
              <span class="info-label">买家信用：</span>
              <span class="info-value"><i class="gold-icon">🏆</i></span>
            </div>
            
            <div class="info-row">
              <span class="info-label">收到好评率：</span>
              <span class="info-value">100%</span>
            </div>
            
            <div class="info-row">
              <span class="info-label">买家信用：</span>
              <span class="info-value">—</span>
            </div>
            
            <div class="info-row">
              <span class="info-label">发出好评率：</span>
              <span class="info-value">100%</span>
            </div>
            
            <div class="info-row">
              <span class="info-label">买家信用：</span>
              <span class="info-value">—</span>
            </div>
            
            <div class="info-row">
              <span class="info-label">注册时间：</span>
              <span class="info-value">2015-11-12</span>
            </div>
            
            <div class="action-buttons">
              <button class="action-btn">添加备注</button>
              <button class="action-btn">发优惠券</button>
              <button class="action-btn">邀请入群</button>
            </div>
            
            <div class="info-tabs">
              <div class="info-tab active">咨询宝贝</div>
              <div class="info-tab">足迹</div>
              <div class="info-tab">推荐</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
  font-family: Arial, sans-serif;
}

/* 侧边栏样式 */
.sidebar {
  width: 280px;
  display: flex;
  flex-direction: column;
  background-color: #0052cc;
  color: white;
  overflow-y: auto;
}

.logo {
  display: flex;
  align-items: center;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
}

.logo-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.status-badge {
  display: flex;
  align-items: center;
  margin-left: 15px;
  margin-bottom: 10px;
}

.online-dot {
  width: 10px;
  height: 10px;
  background-color: #52c41a;
  border-radius: 50%;
  margin-right: 5px;
}

.stats {
  display: flex;
  justify-content: space-around;
  padding: 10px 5px;
  background-color: white;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
}

.stat-num {
  font-size: 20px;
  font-weight: bold;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.nav-tabs {
  padding: 10px;
}

.search-box {
  position: relative;
  margin-bottom: 15px;
}

.search-box input {
  width: 100%;
  padding: 8px 30px 8px 10px;
  border-radius: 20px;
  border: none;
  outline: none;
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.tab-list {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
}

.tab-item {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
}

.tab-item.active {
  background-color: #1890ff;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #f5222d;
  color: white;
  font-size: 12px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-list-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.sort-icon {
  margin-left: 5px;
}

.chat-item {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.chat-item.active {
  background-color: rgba(255, 255, 255, 0.1);
}

.chat-item.pink-bg {
  background-color: rgba(255, 182, 193, 0.2);
}

.chat-item.blue-bg {
  background-color: rgba(173, 216, 230, 0.2);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  overflow: hidden;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-info {
  flex: 1;
  overflow: hidden;
}

.chat-name {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-preview {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: white;
  border-bottom: 1px solid #e8e8e8;
}

.session-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  font-weight: bold;
  margin-right: 10px;
}

.session-time {
  color: #999;
  font-size: 12px;
}

.header-right {
  display: flex;
  align-items: center;
}

.ai-training {
  margin-right: 20px;
}

.ai-label {
  color: #1890ff;
  font-weight: bold;
}

.params-info {
  font-size: 12px;
  color: #888;
  margin-left: 5px;
}

.header-icons {
  display: flex;
  gap: 15px;
}

.tabs-header {
  display: flex;
  background-color: white;
  border-bottom: 1px solid #e8e8e8;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
}

.tab.active {
  color: #1890ff;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1890ff;
}

.chat-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f5f5;
}

.message {
  display: flex;
  margin-bottom: 15px;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.message.user, 
.message.customer {
  flex-direction: row-reverse;
}

.message .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
  flex-shrink: 0;
}

.user-label, .ai-label {
  color: white;
  font-weight: bold;
}

.message.user .avatar, 
.message.customer .avatar {
  background-color: #ff9800;
}

.message.ai .avatar {
  background-color: #1e88e5;
}

.message-content {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  white-space: pre-wrap;
  word-break: break-word;
}

.message.user .message-content, 
.message.customer .message-content {
  background-color: #dcf8c6;
}

.message.ai .message-content {
  position: relative;
}

.message.ai .message-content.typing:after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #333;
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.system-message {
  text-align: center;
  padding: 5px 15px;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 15px;
  margin: 10px auto;
  color: #666;
  font-size: 14px;
  max-width: 80%;
}

.loading-message {
  text-align: center;
  padding: 10px;
  color: #999;
}

.message-tools {
  background-color: #f9f9f9;
  padding: 10px;
  border-top: 1px solid #e8e8e8;
}

.tool-icons {
  display: flex;
  flex-wrap: wrap;
}

.tool-icon {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
}

.tool-icon.history {
  margin-left: auto;
}

.input-area {
  padding: 15px;
  background-color: white;
  border-top: 1px solid #e8e8e8;
}

textarea {
  width: 100%;
  height: 80px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
}

.send-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  gap: 10px;
}

.btn-cancel, .btn-send {
  padding: 5px 15px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #666;
}

.btn-send {
  background-color: #1890ff;
  color: white;
}

.btn-send:disabled {
  background-color: #bae7ff;
  cursor: not-allowed;
}

/* 客户信息区域 */
.customer-info {
  width: 300px;
  background-color: white;
  border-left: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.info-header {
  padding: 15px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.expand-icon {
  color: #999;
}

.customer-details {
  padding: 15px;
}

.customer-name {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.badge.good {
  background-color: #52c41a;
  color: white;
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 12px;
}

.badge.trust {
  background-color: #faad14;
  color: white;
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 12px;
}

.badge.vip {
  background-color: #ff9800;
  color: white;
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 12px;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
  font-size: 14px;
}

.info-label {
  color: #666;
  min-width: 80px;
}

.gold-icon {
  color: #faad14;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.action-btn {
  padding: 5px 10px;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.action-btn:hover {
  color: #1890ff;
  border-color: #1890ff;
}

.info-tabs {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  margin-top: 10px;
}

.info-tab {
  padding: 10px 15px;
  cursor: pointer;
  position: relative;
}

.info-tab.active {
  color: #1890ff;
}

.info-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1890ff;
}
</style> 